<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导航页</title>
<style type="text/css">
    #ul{
        list-style: none;
    }
    #lu1{
        display:none;
    }
    #l1:hover ul{
        display: block;
    }
    #lu2{
        display:none;
    }
    #l2:hover ul{
        display: block;
    }
    #lu3{
        display:none;
    }
    #l3:hover ul{
        display: block;
    }
    #lu4{
        display:none;
    }
    #l4:hover ul{
        display: block;
    }
    #lu5{
        display:none;
    }
    #l5:hover ul{
        display: block;
    }
    #l1{
        float: left;
        width: 250px;
    }
    #l2{
        float: left;
        width: 250px;
    }
    #l3{
        float: left;
        width: 250px;
    }
    #l4{
        float: left;
        width: 250px;
    }
    #l5{
        float: left;
        width: 250px;
    }
    #top{
    height: 100px;
	background: #259FC8;
	}
    #bottom{
    height: 100px;
	background-color: blueviolet;
    bottom: 0px;
    position: absolute;
	}
</style>
</head>
<body>
<div id="mimi">
    <ul id="ul">
        <li id="l1">
            <a href="#">观影</a>
            <ul id="lu1">
                <li><a href="#">唐人街探案</a></li>
                <li><a href="#">囧妈</a></li>
                <li><a href="#">复仇者联盟</a></li>
                <li><a href="#">冰雪奇缘</a></li>
            </ul>
        </li>
        <li id="l2">
            <a href="#">电视剧</a>
            <ul id="lu2">
                <li><a href="#">传闻中的陈芊芊</a></li>
                <li><a href="#">大宋少年志</a></li>
                <li><a href="#">凶案现场</a></li>
                <li><a href="#">冰糖炖雪梨</a></li>
                <li><a href="#">秋蝉</a></li>
            </ul>
        </li>
        <li id="l3">
            <a href="#">动漫</a>
            <ul id="lu3">
                <li><a href="#">一人之下</a></li>
                <li><a href="#">夏目友人帐</a></li>
                <li><a href="#">妖神记</a></li>
                <li><a href="#">名侦探柯南</a></li>
                <li><a href="#">通灵妃</a></li>
            </ul>
        </li>
        <li id="l4">
            <a href="#">综艺</a>
            <ul id="lu4">
                <li><a href="#">奔跑吧兄弟</a></li>
                <li><a href="#">王牌对王牌</a></li>
                <li><a href="#">我是唱作人</a></li>
                <li><a href="#">最强大脑</a></li>
            </ul>
        </li>
        <li id="l5">
            <a href="#">游戏</a>
            <ul id="lu5">
                <li><a href="#">一人之下</a></li>
                <li><a href="#">王者荣耀</a></li>
                <li><a href="#">木鱼</a></li>
                <li><a href="#">宾果消消乐</a></li>
                <li><a href="#">2048</a></li>
            </ul>
        </li>
    </ul>
</div>
<div id="top"></div>
<div id="bottom">
页脚小盒子
</div>
</body>
</html>